<template>
    <div>
        <Row>
            <Col span="12">
            <DatePicker class="ma1" type="daterange" placement="bottom-end" size="small" placeholder="Select date" style="width: 200px">
            </DatePicker>
            </Col>
        </Row>
        <Table class="ma" border :columns="titleList" :data="data3" show-summary></Table>
        <Table class="ma" border :columns="titleList1" :data="data3" show-summary></Table>
        <Table width="500" class="ma" border :columns="titleList2" :data="data3" show-summary></Table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            titleList: [],
            titleList1: [],
            titleList2: [],
            columns2: [
                {
                    title: '姓名',
                    key: 'name',
                    width: 100,
                    fixed: 'left'
                },
                {
                    title: '1',
                    key: 'd1',
                },
                {
                    title: 'Action',
                    key: 'action',
                    fixed: 'right',
                }
            ],
            data3: [
                {
                    name: '张三',
                    d1: 1,
                    d2: 1,
                    d5: 1,
                    d7: 1,
                    d12: 1,
                    d15: 1,
                    d17: 1,
                    d19: 1,
                    p1: 3,
                    p2: 5,
                    p3: 2,
                    p4: 6,
                },
                {
                    name: '李四',
                    d2: 1,
                    p1: 3,
                    p2: 5,
                    p3: 2,
                    p4: 6,
                },
                {
                    name: '王五',
                    d1: 1,
                    d2: 1,
                    d5: 1,
                    d7: 1,
                    d12: 1,
                    d15: 1,
                    d17: 1,
                    d19: 1,
                    p1: 1,
                    p2: 3,
                    p3: 7,
                    p4: 6,
                },
                {
                    name: '赵六',
                    d1: 1,
                    d2: 1,
                    d5: 1,
                    d7: 1,
                    d12: 1,
                    d15: 1,
                    d17: 1,
                    d19: 1,
                    p1: 2,
                    p2: 5,
                    p3: 8,
                    p4: 9,
                }
            ]
        }
    },
    mounted() {
        this.titleList.push({
            title: '姓名',
            key: 'name',
            width: 100,
            fixed: 'left'
        })
        for (let i = 1; i < 31; i++) {
            this.titleList.push({
                title: i+'日',
                key: 'd' + i,
                width: 50,
            })
        }
        const afterTitleList = [
            { title: '项目A', key: 'p1', width: 100, fixed: 'right' },
            { title: '项目B', key: 'p2', width: 100, fixed: 'right' },
            { title: '项目C', key: 'p3', width: 100, fixed: 'right' },
            { title: '项目D', key: 'p4', width: 100, fixed: 'right' },
        ]
        this.titleList.push(...afterTitleList)

        this.titleList1.push({
            title: '姓名',
            key: 'name',
            width: 100,
            fixed: 'left'
        })
        for (let i = 1; i < 31; i++) {
            this.titleList1.push({
                title: i,
                key: 'd' + i,
                width: 50,
            })
        }

        this.titleList2.push({
            title: '姓名',
            key: 'name',
            width: 100,
        })
        const afterTitleList2 = [
            { title: '项目A', key: 'p1', width: 100 },
            { title: '项目B', key: 'p2', width: 100 },
            { title: '项目C', key: 'p3', width: 100 },
            { title: '项目D', key: 'p4', width: 100 },
        ]
        this.titleList2.push(...afterTitleList2)
    }

}
</script>

<style>
.ma {
    margin-bottom: 30px;
}
.ma1{
    margin:30px
}
.ivu-table-header thead tr th{
    text-align: center;
}
</style>